本篇要來介紹
日期時間選擇器第三方元件React Native Picker Select
下稱RNPickerSelect

原先React Native也是有Picker選單元件
但官方在0.59版之後已棄用
https://archive.reactnative.dev/docs/picker

RNPickerSelect 簡介 & 安裝

套件GitHub參考：https://github.com/lawnstarter/react-native-picker-select
版本：8.1.0
套件簡介裡有Demo選單效果可以參考

簡介

RNPickerSelect是 React Native 中的下拉選單器
只要安裝了此套件
就能在APP提供下拉選單提供使用者使用
對應Web的標籤為<select>

日常使用APP時，哪裡會看到下拉選單?

1. Iphone行事曆新增行程時，可下拉單選路程時間...等選項
2. Line聊天左上角排序下拉選單
3. 其他APP性別設定、語言設定...等單選功能

安裝、設定

安裝

npx expo install react-native-picker-select

Expo使用者需額外安裝
npx expo install @react-native-picker/picker

設定方式

本段Package設定非常重要
不設定的話，直接使用套件是會發生Hook Error的
而且是照著官方的範例實作還會Error...

Error: Invalid hook call. Hooks can only be called inside of the body of a function component

設定Package.json，加入下方設定
本段語法用於修正react-native-picker舊版本相容性設定

"overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "$@react-native-picker/picker"
    }
}

套件踩坑GitHub討論串參考此連結

RNPickerSelect 使用方法

引入RNPickerSelect
import RNPickerSelect from "react-native-picker-select";

畫面、選單資料
items存放選單資訊
label & value 為必要格式

const items = [
  { label: "選項1", value: "option1" },
  { label: "選項2", value: "option2" },
  { label: "選項3", value: "option3" },
];
return (
  <SafeAreaView className="flex-1">
    <StatusBar style="auto" />
    <View className="mt-5">
      <RNPickerSelect
        placeholder={{ label: "請選擇", value: "", color: "#9EA0A4" }}
        items={items}
        value="option3"
        onValueChange={(value) => console.log(value)}
        style={StyleSheet.create({
            inputIOSContainer: {
              paddingVertical: 15,
              paddingHorizontal: 10,
         },
        })}
      />
    </View>
  </SafeAreaView>
);

IOS & Android 輸出結果

RNPickerSelect 相關設定講解

• placeholder 未選取資料時預設內容
  • label 文字顯示
  • value 選單值，通常使用空字串或null
• color 文字顏色
• items 下拉選單內容陣列
  參考上方程式碼，傳入陣列即可
• value 預設選單選取值
  若value不在items裡，則預設「請選擇」
• onValueChange 選擇其他項目時觸發事件
  若是從其他選項選回「請選擇」
  也是會觸發事件的
  目前提供value, index 選單值、索引值
• style 選單整體樣式設定
  上方針對inputIOSContainer做IOS選單間距設定
  其他設定可參考官方提供樣式說明
  https://github.com/lawnstarter/react-native-picker-select#styling

※另外官網提供items正式格式
建議使用label & value 屬性就好
{label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel: 'Orange!', testID: 'e2e-orange'}

若color文字設定個五顏六色
使用者會眼花😵

缺點

雙平台下拉選單風格一致性

同前篇日期選單風格問題
RNPickerSelect更是沒有主題設定(mode)提供選擇
不可能做到雙平台主題相同
風格可參考上方雙平台Demo結果

無查詢功能

這套下拉選單來源資料千萬不要太多
若有1000個項目，使用者要滑非常久才能找到選項

因此有些APP在語言、多資料選擇時，仍是使用FlatList清單做為首選
建議下拉選單內容控制在20個項目內
對使用者體驗較佳

套件安裝就踩坑

參考上方「設定方式」
RNPickerSelect是針對react-native-picker/picker所客製化出來
更多功能的第三方套件
而react-native-picker/picker才是React Native官方維護的套件

解決套件衝突問題
也往往會是APP工程師的一大課題😰

結語：
React Native 第三方套件系列到這邊告一段落
若這幾篇沒有符合你的實務需求
在React Native套件庫還有很多實用功能套件庫可以參考

下一篇開始
將開始介紹Expo官方SDK系列
讓你的APP擁有更豐富的實務功能。